import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Icon, Input, Button, Select, Alert, Row, Col } from 'antd';
import { connect } from 'dva';
const { TextArea } = Input;
const { Option } = Select;

export default class Perform extends React.Component<any, any> {
  handleSubmit = () => {
    const { dispatch, close, submit } = this.props;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        close && close();
        submit && submit(values);
        // dispatch({
        //   type: 'person/add',
        //   payload: {
        //     ...values,
        //   },
        // });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const formTailLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8, offset: 4 },
    };
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label={'Id:'} style={{ display: 'none' }}>
          {getFieldDecorator('id')(<Input placeholder="请输入姓名" />)}
        </Form.Item>
        <Form.Item label={'姓名:'}>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入姓名' }],
          })(<Input placeholder="请输入姓名" />)}
        </Form.Item>
        <Form.Item label={'电话号码：'}>
          {getFieldDecorator('phoneNumber', {
            rules: [
              { required: true, message: '请输入电话号码' },
              { pattern: /[0-9]\d*/, message: '请输入正确的电话号码' },
            ],
          })(<Input placeholder="请输入电话号码" />)}
        </Form.Item>
        <Form.Item label={'备注'}>{getFieldDecorator('comments')(<TextArea rows={4} />)}</Form.Item>
      </Form>
    );
  }
}
